/*
 * @Author       : super-J
 * @Date         : 2022-06-18 15:40:08
 * @LastEditTime : 2022-06-20 09:09:40
 * @LastEditors  : super-J
 * @Description  : 
 */
import { Component,  ReactNode } from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";
import Taro from "@tarojs/taro";
import classNames from "classnames";
import { CommonProps, LGSlide } from "../LgSlide";

export interface SlideMenu extends CommonProps {
    content: string | ReactNode;
    onClick?(index?: number, option?: SlideMenu,): void
}
export interface LGSlideProps extends CommonProps {
    default?: number;//默认第几个
    changeIndex?: number;//默认第几个

}
export interface LGSlideState {
    openSlideIndex: number
}

let _slidesId = 0;
export class LGSlides extends Component<LGSlideProps, LGSlideState> {
    private openSlideIndex: number;
    constructor(props) {
        super(props);
        this.openSlideIndex = props.default;
        this.state = {
            openSlideIndex: 0,

        }
    }
    slideId = "slides_" + _slidesId++;
    componentDidMount() {

    }
    initListDom() {
        let children = [];
        return children.concat(this.props.children as any)
    }
    openOneSlide(index: number) {
        this.openSlideIndex = index;
        this.setState({ openSlideIndex: index })
    }
    render() {
        const { state, props } = this;
        let children: any[] = this.initListDom()
        return (
            <View id={'lg_LGSlide_container' + this.slideId} className={classNames('lg_LGSlide_container_warp', props.className)} style={props.style}>
                {children?.map((o, i) => {
                    let slidesCho = this.openSlideIndex === i;
                    return (
                        <LGSlide
                            {...o.props}
                            slidesCho={slidesCho}
                            onClick={() => { this.openOneSlide(i) }}
                            key={i+'hold'}
                        >
                        </LGSlide>
                    );
                })}
            </View>
        );
    }
}


